<!-- 通用弹窗上传文档组件-只有新增状态，无查看、编辑状态 -->
<template>
  <div class="dialog-file-upload-wrap">
    <px-upload
      v-model:file-list="fileList"
      multiple
      :limit="props.countLimit"
      :action="actionUrl"
      :headers="headers"
      :data="props.fileData"
      :before-upload="beforeUpload"
      :on-progress="upLoadProgress"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :on-exceed="uploadExceed"
      :on-remove="fileDelete"
    >
      <px-button type="primary" plain>上传{{ props.fileTitle }}</px-button>
    </px-upload>
  </div>
</template>
<script setup lang="ts">
import { reactive, toRefs } from "vue";
import { PxMessage } from "px-ui";
import { getToken } from "@/utils/auth";
import { deleteFile } from "@/api/common";

// 调用父级-改变文档列表方法
const emits = defineEmits(["changeFileList", "saveFileStatus"]);
// 父级传过来的值
const props = defineProps({
  // 文档上传接口url
  actionUrl: {
    type: String,
    default: "/ifp/sharing/api/v1/file/upload",
    required: false
  },
  // 文档上传接口数据
  fileData: {
    type: Object,
    default: {},
    required: true
  },
  // 文件上传个数
  countLimit: {
    type: Number,
    default: 999,
    required: false
  },
  // 文档上传标题默认为"上传文档"
  fileTitle: {
    type: String,
    default: "文档",
    required: false
  }
});

// 页面本身的值
const state = reactive<any>({
  headers: {
    Authorization: "Bearer " + getToken().accessToken || "",
    facCode: localStorage.getItem("facCode") || ""
  },
  fileList: [], // 文档列表
  fileNumber: 0 // 文档上传数量
});
const { headers, fileList, fileNumber } = toRefs(state);

// 上传文档之前判断大小及格式
const beforeUpload = rawFile => {
  // 只判断文档大小，文档格式根据产品要求放开
  if (rawFile.size / 1024 / 1024 > 100) {
    PxMessage.error(`上传${props.fileTitle}大小不能超过100M`);
    return false;
  }
  return true;
};
// 上传过程中值，页面不能保存
const upLoadProgress = () => {
  emits("saveFileStatus", true);
};
// 上传成功状态
const uploadSuccess = (response, uploadFile, uploadFiles) => {
  fileNumber.value++;
  // 上传成功通知页面可以保存
  if (fileNumber.value === uploadFiles.length) {
    emits("saveFileStatus", false);
  }
  if (response.success) {
    // 上传成功，通过success为true判断
    emits("changeFileList", fileList.value);
  } else {
    // 后台返回上传失败信息
    fileList.value.shift();
    PxMessage.error(response.msg);
    emits("changeFileList", fileList.value);
    fileNumber.value--;
  }
};
// 上传失败状态
const uploadError = error => {
  // 此处由于后端未处理，前端先统一写"文档上传失败，请重试"
  fileList.value.shift();
  PxMessage.error(`${props.fileTitle}上传失败，请重试`);
  emits("changeFileList", fileList.value);
  fileNumber.value--;
};
// 上传个数超出限制
const uploadExceed = files => {
  PxMessage.error(`上传文档数量不能超过${props.countLimit}个`);
};
// 文档删除
const fileDelete = async (uploadFile, uploadFiles) => {
  const params = {
    fileId: [uploadFile?.response?.data?.id]
  };
  await deleteFile(params);
  PxMessage.success(`${props.fileTitle}删除成功`);
  emits("changeFileList", uploadFiles);
  fileNumber.value--;
};
</script>

<style lang="scss" scoped>
.dialog-file-upload-wrap {
  width: 100%;
  :deep(.px-upload__tip) {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
  }
}
</style>
